<!-- Accordion.vue -->
<template>
  <div class="accordion divide-y text-justify">
    <div v-for="(item, index) in items" :key="index" class="accordion-item">
      <div class="accordion-header" @click="toggle(index)">
        <div class="header-title">{{ item.title }}</div>
        <div class="indicator">
          <span class="stroke-[#54595F] stroke-24" v-if="isActive(index)">
            <svg
                t="1733909969699"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2908"
                width="16"
                height="16"
            >
              <path
                  d="M96.8064 576h817.5872C946.6496 576 972.8 550.208 972.8 518.4S946.6496 460.8 914.3936 460.8H96.8064C64.5504 460.8 38.4 486.592 38.4 518.4S64.5504 576 96.8064 576z"
                  fill="#C00000"
                  p-id="2909"
              ></path>
            </svg>
          </span>
          <span class="stroke-[#54595F] stroke-24" v-else>
            <svg
                t="1733910082072"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3170"
                width="16"
                height="16"
            >
              <path
                  d="M505.6 51.2a58.3936 58.3936 0 0 1 58.4064 58.4064l-0.0128 350.3872h350.4128a58.4064 58.4064 0 0 1 58.3296 55.6544L972.8 518.4a58.3936 58.3936 0 0 1-58.4064 58.4064l-350.4-0.0128v350.4128a58.4064 58.4064 0 0 1-55.6416 58.3296L505.6 985.6a58.3936 58.3936 0 0 1-58.4064-58.4064V576.8064H96.8064a58.4064 58.4064 0 0 1-58.3424-55.6416L38.4 518.4a58.3936 58.3936 0 0 1 58.4064-58.4064h350.3872V109.6064a58.4064 58.4064 0 0 1 55.6544-58.3424z"
                  fill="#54595F"
                  p-id="3171"
              ></path>
            </svg>
          </span>
        </div>
      </div>
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave"
      >
        <div v-if="isActive(index)" class="accordion-content">
          <p class="py-3.75 px-5">
            {{ item.content  }}
          </p>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

/**
 * props:
 * - items: Array<{ title: string, content: string }>
 */
defineProps({
  items: {
    type: Array,
    required: true
  }
})

const activeItem = ref(0)

// Toggle function
const toggle = (id) => {
  activeItem.value = activeItem.value === id ? null : id
}

// Check if the panel is active
const isActive = (id) => activeItem.value === id

const beforeEnter = (el) => {
  el.style.height = '0'
  el.style.overflow = 'hidden'
}

// Enter 过渡中
const enter = (el) => {
  const actualHeight = el.scrollHeight
  el.style.transition = 'all 0.3s linear'
  requestAnimationFrame(() => {
    el.style.height = actualHeight + 'px'
  })
}

// Enter 完成后
const afterEnter = (el) => {
  el.style.transition = ''
  el.style.overflow = ''
}

// Leave 过渡前
const beforeLeave = (el) => {
  el.style.height = el.scrollHeight + 'px'
}

// Leave 过渡中
const leave = (el) => {
  el.style.transition = 'all 0.3s linear'
  requestAnimationFrame(() => {
    el.style.height = '0'
    el.style.overflow = 'hidden'
  })
}

// Leave 完成后
const afterLeave = (el) => {
  el.style.transition = ''
}
</script>

<style scoped>
.accordion {
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  min-width: Min(100%, 1140px);
  max-width: 1140px;
  margin: 20px auto;
}

.accordion-item {
  width: 100%;
}

.accordion-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #ffffff;
  color: #54595F;
}

.accordion-header:hover {
  color: #C00000;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
}

.accordion-content {
  background-color: #F4F4F4;
  line-height: 27px;
  letter-spacing: normal;
  border-top-width: 1px;
}
</style>
